<template>
  <button @click="isShow = !isShow">click</button>

  <!-- 这个组件 transition 包裹谁 就可以添加动画  -->
  <transition>
    <div v-if="isShow" class="box"></div>
  </transition>

  <!--如果在页面中有多个元素要执行动画,
   而多个元素要执行的动画不同时,
    为了对多个元素的动画样式进行区分, 
    在调用 transiton 组件时需要为它添加 name 属性以区分样式类名。  -->
  <transition name="fade">
    <div v-if="!isShow" class="box"></div>
  </transition>
  <hr />
</template>

<script lang="ts">
import { defineComponent } from "vue";
// 导入ref
import { ref } from "vue";
export default defineComponent({
  name: "App",
  // 组合式API入口

  setup() {
    // 定义参数
    const isShow = ref(false);
    // 返回值
    return { isShow };
  },
  components: {},
});
</script>

<style>
.box {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 400px;
  height: 400px;
  background-color: skyblue;
}
/* 添加动画 */
/* 当创建元素时,
 transiton 组件会为执行动画的元素添加三个类名, 
 我们可以通过这三个类名为元素添加入场动画。 */
.v-enter-from {
  opacity: 0;
}
.v-enter-to {
  opacity: 1;
}
.v-enter-active {
  transition: opacity 2s ease-in;
}
/* // ease-in 先慢后快 */
/* 当销毁元素时, transition 
组件会为执行动画的元素添加三个类名,
 我们可以通过这个三个类名为元素添加离场动画样式。 */
.v-leave-from {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-leave-active {
  transition: opacity 2s ease-out;
}
/* // ease-out 先快后慢 */

/* 多个transition */
.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 4s ease-out;
}

/* .fade-leave-from {
}
.fade-leave-to {
}
.fade-leave-active {
} */
</style>
